<template>
	<view class="notice-page">
		<scroll-view class="top-tabs-view" scroll-x="true" :scroll-left="scrollLeft">
			<block v-for="(tab,index) in tabs" :key="index">
				<view class="tabs-item-wrap" v-bind:id="'tabNum'+index" @click="swichMenu(index)">
					<view class="tabs-item">
						<view class="tabs-item-txt" :class="[currentTab==index ? 'theme-color' : '']">{{tab.name}}</view>
						<view class="tabs-item-bottom" :class="[currentTab==index ? 'theme-color' : '']"></view>
					</view>
				</view>
			</block>
		</scroll-view>
		
		<mescroll-uni top="90" ref="mescrollRef"
		@up="loadList" @init="mescrollInit" :up="upOption" @down="downCallback">
			<view class="notice-con">
				<template>
					<view v-for="(item,index) in list" :key="index" class="item" @tap="jumpToDetail(item)">
						<view class="item-left">
							<i class="iconfont iconxiaoxi1"></i>
							<i class="point" v-if="item.isReaded=='0'"></i>
						</view>
						<view class="item-right" v-if="currentTab===0">
							<view class="item-title">
								<!-- <text class="tag fw" v-if="item.messageType">
									【{{memberTypeList[Number(item.messageType)-1]}}】
								</text> -->
								<text class="con">{{item.messageTitle}}</text>
							</view>
							<view class="item-time">{{item.createTime?item.createTime:''}}</view>
						</view>
						
						<view class="item-right" v-else>
							<view class="item-title">
								{{item.faqContent}}
							</view>
							<view class="item-time">{{item.updateTime?item.updateTime:''}}</view>
						</view>
					</view>
				</template>
			</view>
		</mescroll-uni>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [ MescrollMixin],
		components: {
		},
		data() {
			return {
				scrollLeft: 0,
				currentTab: 0,//当前tab
				scrollTop: 0,
				tabs: [{
					name: "我的消息"
				}, {
					name: "系统消息"
				}],
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, 
				},
				list:[],
				memberTypeList:['普通消息','瘦身达人','产品体验','活动促销','新闻','积分'],
				height:0,
				curItem:null,
			};
		},
		onLoad(){
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.height = 750 / uni.upx2px(750)*(res.windowHeight - uni.upx2px(10))
				}
			});
		},
		methods: {
			loadList(page){
				if(this.currentTab===0){
					this.getMemberNoticeList(page);
				}else{
					this.getSysNoticeList(page);
				}
			},
			changeStatus(){
				if(this.curItem.isReaded=='0'){//之前是未阅读状态
					this.list.forEach(item=>{
						if(this.curItem.id===item.id){
							item.isReaded='1'
						}
					})
				}
			},
			getMemberNoticeList(page){
				const params = {
					current: page.num,
					pageSize: page.size,
				};
				this.$http.memberNoticeList(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list= []
						};
						this.list = this.list.concat(curPageData);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			getSysNoticeList(page){
				const params = {
					current: page.num,
					pageSize: page.size,
				};
				this.$http.sysNoticeList(params).then((res) => {
					if(res.status === 0) {
						let curPageData = res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.list= []
						};
						this.list = this.list.concat(curPageData);
						console.log(this.list);
					}
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			jumpToDetail(item){
				this.curItem=item;
				uni.navigateTo({
					// url:'noticeDetail?id='+id+'&type='+this.currentTab
					url:`noticeDetail?id=${item.id}&version=${item.version}&type=${this.currentTab}`
				})
			},
			swichMenu: async function(current) { //点击其中一个 tab
				if (this.currentTab == current) {
					return false;
				}else {
					
					this.currentTab = current;
					this.list = []// 先置空列表,显示加载进度
					this.mescroll.resetUpScroll(); // 再刷新列表数据
					
					// // #ifdef APP-PLUS
					// if(current===0){
					// 	this.getMemberNoticeList({num:1,size:10})
					// }else if(current===1){
					// 	this.getSysNoticeList({num:1,size:10})
					// }
					// // #endif 
				}
			},
			onUnload() {//返回上一页
				this.$util.prePage().unRead();
			},
		},
	}
</script>

<style lang="scss">
	.notice-page {
	
		background-color: #fff;
		border-top:2rpx solid $borderColor;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
	}
	.fw{font-weight: bold;}
	.top-tabs-view {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
		box-shadow: 0 0 4rpx #eee;
		white-space: nowrap;
		height: 90rpx;
		position: fixed;
		left: 0;
		z-index: 888;
		.tabs-item-wrap {
			display: inline-block;
			white-space: nowrap;
			height: 90rpx;
			width:50%;

			.tabs-item {
				margin-left: 35rpx;
				margin-right: 30rpx;
				position: relative;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.tabs-item-txt {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					font-weight: 400;
					// color: #333333;
					&.theme-color{
						color: $themeColor1;
					}
				}
				
				.tabs-item-bottom {
					position: absolute;
					bottom: 0rpx;
					width: 130rpx;
					height: 4rpx;
					left: calc(50% - 65rpx);
					&.theme-color{
						background-color: $themeColor1;
					}
				}
			}
		}
	}
	.notice-con{
		width: 100%;
		
		padding:0 30rpx;
		.item{
			width: 100%;
			display: flex;
			padding:30rpx 0 30rpx 0;
			border-bottom: 2rpx solid $borderColor;
			.item-left{
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				border-radius: 50%;
				text-align: center;
				color:#fff;
				background-color: #f4b406;
				position: relative;
				margin-right: 24rpx;
				.iconfont{
					font-size: 30rpx;
				}
				.point{
					position: absolute;
					right: 2rpx;
					top:2rpx;
					width: 14rpx;
					height: 14rpx;
					background-color: $red;
					border-radius: 50%;
				}
			}
			.item-right{
				flex:1;
				.item-title{
					font-size: 28rpx;
					width: 100%;
					color:#7d7d7d;
					.tag{
						color:#000;
					}
				}
				.item-time{
					margin-top:16rpx;
					font-size: 24rpx;
					color: #aaa;
				}
			}
		}
	}
</style>
